<template>
	<view class="my_userinfof__container">
		<view class="top_box">
			<view class="avatar_loadWhirl">
				<image class="avatar" :src="userinfo.avatarUrl"></image>
			</view>
			<view class="vx_name">{{userinfo.nickName}}</view>
		</view>
		
		<view class="panel_list__one">
		  <view class="panel_body">
		    <view class="panel_item">
		      <text>5</text>
		      <text>收藏的店铺</text>
		    </view>
		    <view class="panel_item">
		      <text>20</text>
		      <text>收藏的商品</text>
		    </view>
		    <view class="panel_item">
		      <text>13</text>
		      <text>关注的商品</text>
		    </view>
		    <view class="panel_item">
		      <text>14</text>
		      <text>足迹</text>
		      </view>
		    </view>
		</view>
		
		<view class="panel_list__two">
		  <view class="panel_title">我的订单</view>
		  <view class="panel_body">
		    <view class="panel_item">
		      <image src="../../static/icons/icon1.png" class="icon"></image>
		      <text>待付款</text>
		    </view>
		    <view class="panel_item">
		      <image src="../../static/my-icons/icon2.png" class="icon"></image>
		      <text>待收货</text>
		    </view>
		    <view class="panel_item">
		      <image src="../../static/my-icons/icon3.png" class="icon"></image>
		      <text>退款/退货</text>
		    </view>
		    <view class="panel_item">
		      <image src="../../static/my-icons/icon4.png" class="icon"></image>
		      <text>全部订单</text>
		    </view>
		  </view>
		</view>
		
		<view class="panel_list__three">
		  <view class="panel_list__item">
		    <text>收货地址</text>
		    <uni-icons type="arrowright" size="15"></uni-icons>
		  </view>
		  <view class="panel_list__item">
		    <text>联系客服</text>
		    <uni-icons type="arrowright" size="15"></uni-icons>
		  </view>
		  <view class="panel_list__item" @click="loginOut">
		    <text>退出登录</text>
		    <uni-icons type="arrowright" size="15"></uni-icons>
		  </view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
	export default {
		name:"my-userinfo",
		data() {
			return {
			};
		},
		
		computed: {
			...mapState('my_user', ['userinfo']),
		},
		
		methods: {
			...mapMutations('my_user', ['updataAddressData', 'updateToken', 'updateUserInfo']),
			async loginOut() {
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确认退出吗？',
				}).catch((err) => err);
				
				if(succ && succ.confirm) {
					this.updataAddressData({});
					this.updataAddressData({});
					this.updateToken('');
				}
			},
		},
	}
</script>

<style lang="scss">
.my_userinfof__container {
	height: 100%;
	background-color: #f4f4f4;
	.top_box {
	  height: 400rpx;
	  background-color: #c00000;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
		.avatar_loadWhirl {
			animation: externalHalo 3s linear;
      animation-iteration-count:infinite;
			.avatar {
				display: block;
				width: 90px;
				height: 90px;
				border-radius: 45px;
				border: 5rpx solid white;
				box-shadow: 0 1px 5px black;
				
				animation: internalAvatar 3.5s linear;
				animation-iteration-count:infinite;
			}
		}
		
		@keyframes internalAvatar {
		  0%{
		    transform: rotate(0deg);
		  }
		  25%{
		    transform: rotate(-90deg);
		  }
		  50%{
		    transform: rotate(-180deg);
		  }
		  100%{
		    transform: rotate(-360deg);
		  }
		}
			
		@keyframes externalHalo {
			0%{
			  transform: rotate(0deg);
			}
			25%{
			  transform: rotate(90deg);
			}
			50%{
			  transform: rotate(180deg);
			}
			100%{
			  transform: rotate(360deg);
			}
		}
		
		.vx_name {
			color: white;
      font-weight: bold;
      font-size: 16px;
      margin-top: 10px
		}
	}
	
	.panel_list__one {
		padding: 0 10px;
		position: relative;
		top: -10px;
		.panel_body {
			display: flex;
      justify-content: space-around;
			background-color: white;
			border-radius: 3px;
			margin-bottom: 8px;
			.panel_item {
				display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;
			}
		}
	}
	
	.panel_list__two {
		padding: 0 10px;
		position: relative;
		top: -10px;
		background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;
		.panel_title {
			line-height: 45px;
      padding-left: 10px;
      font-size: 15px;
      border-bottom: 1px solid #f4f4f4;
		}
		.panel_body {
			display: flex;
      justify-content: space-around;
				.panel_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					font-size: 13px;
					padding: 10px 0;
					.icon {
						width: 65rpx;
						height: 65rpx;
					}
				}
		}
	}

	.panel_list__three {
		background-color: white;
		border-radius: 3px;
		margin-bottom: 8px;
		.panel_list__item {
			height: 45px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 15px;
			padding: 0 10px;
			border-bottom: 1px solid #F4F4F4;
		}
	}
}
</style>